<!--天猫资金流水-->
<script setup lang="ts">
    import {AxiosPromise} from "axios";

    defineOptions({
        name: "TmFundFlow",
        inheritAttrs: false,
    });

    import {ElLoading, UploadFile} from "element-plus";
    import {
        getTmFundFlowPage,
        getTmFundFlowForm,
        saveTmFundFlow,
        deleteTmFundFlow,
        importTmFundFlow,
        exportTmFundFlow
    } from "@/api/tmFundFlow";
	import lodash from "lodash-es";
	import {listAll} from "@/api/store";

    const queryFormRef = ref(ElForm);
    const dataFormRef = ref(ElForm);
    const importRef = ref(ElForm);

    const loading = ref(false);
    const ids = ref<number[]>([]);
    const total = ref(0);
		const monthList = ref<[]>([]);
		const importParams = reactive<any>({});
		const storeList = ref<[]>([])

    const queryParams = reactive<any>({
        pageNum: 1,
        pageSize: 20,
    });

    const tmFundFlowList = ref<[]>();

    const dialog = reactive<DialogOption>({
        visible: false,
    });
    const importDialog = reactive<DialogOption>({
        title: "天猫资金流水数据导入",
        visible: false,
    });

    const excelFile = ref<File>();
    const excelFilelist = ref<File[]>([]);
    const formData = reactive<any>({});

    const importRules = reactive({
        storeId: [{ required: true, message: "请选择店铺", trigger: "change" }]
    });




    /**
     * 查询
     */
    function handleQuery() {
        loading.value = true;
				if (lodash.size(monthList.value) > 0){
					lodash.set(queryParams, 'startMonth', monthList.value[0])
					lodash.set(queryParams, 'endMonth', monthList.value[1])
				}
        getTmFundFlowPage(queryParams)
            .then(({ data }) => {
                tmFundFlowList.value = data.list;
                total.value = data.total;
            })
            .finally(() => {
                loading.value = false;
            });
    }

    /**
     * 重置查询
     */
    function resetQuery() {
        queryFormRef.value.resetFields();
        queryParams.pageNum = 1;
        handleQuery();
    }

    /**
     * 行checkbox change事件
     */
    function handleSelectionChange(selection: any) {
        ids.value = selection.map((item: any) => item.id);
    }

    /**
     * 打开字典类型表单弹窗
     *
     * @param dicTypeId 字典类型ID
     */
    function openDialog(id?: number) {
        dialog.visible = true;
        if (id) {
            dialog.title = "修改天猫资金流水";
            getTmFundFlowForm(id).then(({ data }) => {
                Object.assign(formData, data);
            });
        } else {
            dialog.title = "新增天猫资金流水";
        }
    }

    /**
     * 字典类型表单提交
     */
    function handleSubmit() {
        dataFormRef.value.validate((isValid: boolean) => {
            if (isValid) {
                loading.value = false;
                saveTmFundFlow(formData)
                    .then(() => {
                        ElMessage.success("保存成功");
                        closeDialog();
                        handleQuery();
                    })
                    .finally(() => (loading.value = false));
            }
        });
    }

    /**
     * 关闭弹窗
     */
    function closeDialog() {
        dialog.visible = false;
        resetForm();
    }

    /**
     * 重置表单
     */
    function resetForm() {
        dataFormRef.value.resetFields();
        dataFormRef.value.clearValidate();

        formData.id = undefined;
    }

    /**
     * 删除天猫资金流水
     */
    function handleDelete(id?: number) {
        const dictTypeIds = [id || ids.value].join(",");
        if (!dictTypeIds) {
            ElMessage.warning("请勾选删除项");
            return;
        }

        ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }).then(() => {
            deleteTmFundFlow(dictTypeIds).then(() => {
                ElMessage.success("删除成功");
                resetQuery();
            });
        });
    }

    /** 打开导入弹窗 */
    async function openImportDialog() {
				getAllStore()
        importDialog.visible = true;
    }

    /**
     * Excel文件change事件
     *
     * @param file
     */
    function handleExcelChange(file: UploadFile) {
		if (file.size !== undefined) {
			if (file.size > 20*1024*1024) {
				ElMessage.warning("上传文件大小已经超过20M，请尝试拆分成多个文件再上传");
				return false
			}
		}
        if (!/\.(csv|xlsx|xls|XLSX|XLS|CSV)$/.test(file.name)) {
            ElMessage.warning("上传Excel只能为xlsx、xls、csv格式");
            excelFile.value = undefined;
            excelFilelist.value = [];
            return false;
        }
        excelFile.value = file.raw;
    }

    /** 导入提交 */
    function handleImport() {
        if (!excelFile.value) {
            ElMessage.warning("上传Excel文件不能为空");
            return false;
        }
				importRef.value.validate((isValid: boolean) => {
            if (isValid) {
							const importLoading = ElLoading.service({
								lock: true,
								text: '导入中...',
								background: 'rgba(0, 0, 0, 0.7)',
							})
							importTmFundFlow(excelFile.value, importParams.storeId).then((response) => {
								closeImportDialog();
								ElMessage.success('导入成功');
								resetQuery();
							}).finally(() => importLoading.close());
            }
        });
    }

    /**  关闭导入弹窗 */
    function closeImportDialog() {
        importDialog.visible = false;
        excelFile.value = undefined;
        excelFilelist.value = [];
				importParams.storeId = undefined;
    }

    /** 导出天猫资金流水 */
    function handleExport() {
        const strIds = [ids.value].join(",");
        exportTmFundFlow(strIds).then((response: any) => {
            const blob = new Blob([response.data], {
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
            });
            const a = document.createElement("a");
            const href = window.URL.createObjectURL(blob); // 下载的链接
            a.href = href;
            a.download = decodeURI(
                response.headers["content-disposition"].split(";")[1].split("=")[1]
            ); // 获取后台设置的文件名称
            document.body.appendChild(a);
            a.click(); // 点击导出
            document.body.removeChild(a); // 下载完成移除元素
            window.URL.revokeObjectURL(href); // 释放掉blob对象
        });
    }

	function getAllStore() {
		listAll().then((response) => {
			storeList.value = []
			const group_store = lodash.groupBy(response.data, 'storeKeyName');
			for (let key in group_store) {
		  storeList.value.push({'label': key, 'options': group_store[key]})
			}
		})
	}

    onMounted(() => {
				let now = new Date()
				let month = now.getMonth()
				let nowMonth;
				if (month < 9){
					nowMonth = now.getFullYear() + '0' + (now.getMonth() + 1) + ''
				}	else {
					nowMonth = now.getFullYear() + '' + (now.getMonth() + 1) + ''
				}
				monthList.value = [nowMonth, nowMonth]
				getAllStore()
        handleQuery();
    });
</script>

<template>
    <div class="app-container">
        <div class="search-container">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
								<el-form-item label="查询月份">
									<el-date-picker
											style="width: 200px"
											v-model="monthList"
											type="monthrange"
											range-separator="至"
											start-placeholder="开始月份"
											end-placeholder="结束月份"
											value-format="YYYYMM"
											:clearable="false"
									/>
								</el-form-item>
								<el-form-item label="店铺" prop="storeId">
									<el-select class="yz-el-select" v-model="queryParams.storeId" style="width: 200px;" filterable clearable placeholder="请选择店铺">
										<el-option-group
												v-for="group in storeList"
												:key="group.label"
												:label="group.label"
										>
											<el-option
													v-for="item in group.options"
													:key="item.id"
													:label="item.innerSystemStoreName"
													:value="item.id"
											/>
										</el-option-group>
									</el-select>
								</el-form-item>
								<el-form-item label="账务流水号" prop="financeNo">
									<el-input
											v-model="queryParams.financeNo"
											placeholder="请输入账务流水号"
											clearable
											style="width: 180px"
											@keyup.enter="handleQuery"
									/>
								</el-form-item>
								<el-form-item label="业务流水号" prop="businessNo">
									<el-input
											v-model="queryParams.businessNo"
											placeholder="请输入业务流水号"
											clearable
											style="width: 180px"
											@keyup.enter="handleQuery"
									/>
								</el-form-item>
								<el-form-item label="商户订单号" prop="sellerOrderNo">
									<el-input
											v-model="queryParams.sellerOrderNo"
											placeholder="请输入商户订单号"
											clearable
											style="width: 180px"
											@keyup.enter="handleQuery"
									/>
								</el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery()"
                    ><i-ep-search />搜索</el-button
                    >
                    <el-button @click="resetQuery()"><i-ep-refresh />重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-card shadow="never">
            <template #header>
                <div class="flex justify-between">
                    <div>
                        <el-button
                                v-hasPerm="['sys:tmFundFlow:save']"
                                type="success"
                                @click="openDialog()"
                        ><i-ep-plus />新增</el-button
                        >
                        <el-button
                                type="danger"
                                :disabled="ids.length === 0"
                                @click="handleDelete()"
                                v-hasPerm="['sys:tmFundFlow:delete']"
                        ><i-ep-delete />删除</el-button
                        >
                    </div>
                    <div>
                        <el-button class="ml-3" @click="openImportDialog" v-hasPerm="['sys:tmFundFlow:import']"
                        ><template #icon><i-ep-top /></template>导入</el-button
                        >
                        <el-button class="ml-3" @click="handleExport" v-hasPerm="['sys:tmFundFlow:export']"
                        ><template #icon><i-ep-download /></template>导出</el-button
                        >
                    </div>
                </div>
            </template>
            <el-table
                    size="small"
                    :header-row-style="{color: 'dimgray'}"
                    v-loading="loading"
                    highlight-current-row
                    :data="tmFundFlowList"
                    border
                    @selection-change="handleSelectionChange"
                    :height="tmFundFlowList && tmFundFlowList.length > 0 ? 570 : 130"
            >
                <el-table-column type="selection" width="40" align="center" show-overflow-tooltip />
                <el-table-column label="店铺名称" prop="storeName" width="100" show-overflow-tooltip/>
                <el-table-column label="账务流水号" prop="financeNo" width="100" show-overflow-tooltip/>
                <el-table-column label="业务流水号" prop="businessNo" width="100" show-overflow-tooltip/>
                <el-table-column label="原商户订单号" prop="originalSellerOrderNo" width="100" show-overflow-tooltip/>
                <el-table-column label="商户订单号" prop="sellerOrderNo" width="100" show-overflow-tooltip/>
                <el-table-column label="商品名称" prop="productName" width="100" show-overflow-tooltip/>
                <el-table-column label="发生时间" prop="orderTime" width="100" show-overflow-tooltip/>
                <el-table-column label="对方账号" prop="buyerAcount" width="100" show-overflow-tooltip/>
                <el-table-column label="收入金额" prop="incomeAmount" width="100" show-overflow-tooltip/>
                <el-table-column label="支出金额" prop="payAmount" width="100" show-overflow-tooltip/>
                <el-table-column label="账户余额" prop="balance" width="100" show-overflow-tooltip/>
                <el-table-column label="交易渠道" prop="channel" width="100" show-overflow-tooltip/>
                <el-table-column label="业务类型" prop="businessType" width="100" show-overflow-tooltip/>
                <el-table-column label="备注" prop="remark" width="100" show-overflow-tooltip/>
            </el-table>

            <pagination
                    v-if="total > 0"
                    v-model:total="total"
                    v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize"
                    @pagination="handleQuery"
            />
        </el-card>

        <el-dialog
                v-model="dialog.visible"
                :title="dialog.title"
                width="500px"
                :close-on-click-modal="false"
                @close="closeDialog"
        >
            <el-form
                    ref="dataFormRef"
                    :model="formData"
                    :rules="rules"
                    label-width="150px"
            >
                    <el-form-item label="账务流水号" prop="financeNo">
                        <el-input v-model="formData.financeNo" placeholder="请输入账务流水号" clearable/>
                    </el-form-item>
                    <el-form-item label="业务流水号" prop="businessNo">
                        <el-input v-model="formData.businessNo" placeholder="请输入业务流水号" clearable/>
                    </el-form-item>
                    <el-form-item label="原商户订单号" prop="originalSellerOrderNo">
                        <el-input v-model="formData.originalSellerOrderNo" placeholder="请输入原商户订单号" clearable/>
                    </el-form-item>
                    <el-form-item label="商户订单号" prop="sellerOrderNo">
                        <el-input v-model="formData.sellerOrderNo" placeholder="请输入商户订单号" clearable/>
                    </el-form-item>
                    <el-form-item label="商品名称" prop="productName">
                        <el-input v-model="formData.productName" placeholder="请输入商品名称" clearable/>
                    </el-form-item>
                    <el-form-item label="发生时间" prop="orderTime">
                        <el-input v-model="formData.orderTime" placeholder="请输入发生时间" clearable/>
                    </el-form-item>
                    <el-form-item label="对方账号" prop="buyerAcount">
                        <el-input v-model="formData.buyerAcount" placeholder="请输入对方账号" clearable/>
                    </el-form-item>
                    <el-form-item label="收入金额" prop="incomeAmount">
                        <el-input v-model="formData.incomeAmount" placeholder="请输入收入金额" clearable/>
                    </el-form-item>
                    <el-form-item label="支出金额" prop="payAmount">
                        <el-input v-model="formData.payAmount" placeholder="请输入支出金额" clearable/>
                    </el-form-item>
                    <el-form-item label="账户余额" prop="balance">
                        <el-input v-model="formData.balance" placeholder="请输入账户余额" clearable/>
                    </el-form-item>
                    <el-form-item label="交易渠道" prop="channel">
                        <el-input v-model="formData.channel" placeholder="请输入交易渠道" clearable/>
                    </el-form-item>
                    <el-form-item label="业务类型" prop="businessType">
                        <el-input v-model="formData.businessType" placeholder="请输入业务类型" clearable/>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="formData.remark" placeholder="请输入备注" clearable/>
                    </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="handleSubmit">确 定</el-button>
                    <el-button @click="closeDialog">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 导入弹窗 -->
        <el-dialog
                v-model="importDialog.visible"
                :title="importDialog.title"
                width="600px"
                append-to-body
                @close="closeImportDialog"
        >
            <el-form label-width="80px" :model="importParams" :rules="importRules" ref="importRef">
								<el-form-item label="店铺" prop="storeId">
									<el-select class="yz-el-select" v-model="importParams.storeId" filterable placeholder="请选择店铺">
										<el-option-group
												v-for="group in storeList"
												:key="group.label"
												:label="group.label"
										>
											<el-option
													v-for="item in group.options"
													:key="item.id"
													:label="item.innerSystemStoreName"
													:value="item.commercePlatformStoreCode"
											/>
										</el-option-group>
									</el-select>
								</el-form-item>
                <el-form-item label="Excel">
                    <el-upload
                            class="upload-demo"
                            action=""
                            drag
                            :auto-upload="false"
                            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                            :file-list="excelFilelist"
                            :on-change="handleExcelChange"
                            :limit="1"
                    >
                        <el-icon class="el-icon--upload">
                            <i-ep-upload-filled/>
                        </el-icon>
                        <div class="el-upload__text">
                            将文件拖到此处，或
                            <em>点击上传</em>
                        </div>
                        <template #tip>
                            <div class="el-upload__tip">xls/xlsx files</div>
                        </template>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="handleImport">确 定</el-button>
                    <el-button @click="closeImportDialog">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
